
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Modal } from '@arco-design/web-vue';
  const modelVisible = ref(false);

  const toCollect = () => {
    modelVisible.value = true;
  };
</script>
<template>
  <div>
    <a-badge :count="922">
      <div class="bg-module">
        <a-button type="text" class="text-[24px] mt-[10px]">
          <template #icon>
            <icon-thumb-up-fill class="text-[#8a919f]" />
          </template>
        </a-button>
      </div>
    </a-badge>
    <div class="bg-module mt-[25px]">
      <a-button type="text" class="text-[24px] mt-[10px]">
        <template #icon>
          <icon-message class="text-[#8a919f]" />
        </template>
      </a-button>
    </div>
    <div class="bg-module mt-[25px]" @click="toCollect">
      <a-button type="text" class="text-[24px] mt-[10px]">
        <template #icon>
          <icon-star-fill class="text-[#8a919f]" />
        </template>
      </a-button>
    </div>

    <Modal v-model:visible="modelVisible">
      <template #title>
        <h2>选择收藏集</h2>
      </template>
      <template #footer>
      <a-row>
        <a-col :span="12">11</a-col>
        <a-col :span="12">11</a-col>
      </a-row>  
      </template>
    </Modal>
  </div>
</template>

<style  scoped>
  .bg-module {
    width: 55px;
    height: 55px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    cursor: pointer;
    text-align: center;
  }

  .arco-btn-text:hover,
  .arco-btn-text[type='button']:hover,
  .arco-btn-text[type='submit']:hover {
    background-color: inherit !important;
  }
</style>